<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <div><input type="checkbox" v-model="isAll" />全选</div>
      <ul>
        <li v-for="item in hobby">
          <input v-model="item.isChecked" type="checkbox" />
          <span>{{ item.name }}</span>
        </li>
      </ul>
    </div>

    <script src="./vue.js"></script>
    <script>
      new Vue({
        el: '#app',
        data () {
          return {
            hobby: [
              { name: '唱', isChecked: false },
              { name: '跳', isChecked: true },
              { name: 'rap', isChecked: false },
              { name: '打篮球', isChecked: true }
            ]
          }
        },
        computed: {
          // isAll () {
          //     return this.hobby.every(v => {
          //         if (v.isChecked) {
          //             return true
          //         }else {
          //             return false
          //         }
          //     })
          // }

          isAll: {
            get () {
              //   return this.hobby.every(v => {
              //     if (v.isChecked) {
              //       return true
              //     } else {
              //       return false
              //     }
              //   })

              return this.hobby.every(v => v.isChecked)
            },
            set (val) {
              this.hobby.forEach(v => (v.isChecked = val))
            }
          }
        }
      })
    </script>
  </body>
</html>
